<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        /*
            完善版防抖，挖坑代填https://juejin.cn/post/7075890311649558541
        */
        // 说白了原理就是经过dobounce处理返回的防抖函数，每次调用处理的都是同一个timer变量，所以可以影响上一次函数执行的情况（清除定时器timer或者设置timer）
        function dobounce(fn, delay) {
            let timer = null;
            /*
                这里支持传参，写给返回的函数，不要写在debounce参数列表里（面试翻车实录——笑哭）
            */
            return function(...args) {
                if(timer) {
                    clearTimeout(timer);
                }
                timer = setTimeout(() => {
                    /*
                        这里因为在箭头函数中，所以this属于父级上下文，也就是声明setTimeout的代码所属的上下文，也就是return function返回的这个函数
                    */
                    fn.apply(this, args);
                }, delay);
            }
        }
    </script>
</body>
</html>